<script setup>
import axios from "axios";
import {useRoute} from "vue-router";
import {ref} from "vue";

const route = useRoute();
let articleContentId = route.query.articleId ?? 0;
console.log(articleContentId);
let Article = ref({
  articleId: 0,
  articleTitle: "",
  consultant: null,
  consultantId: 0,
  content: "",
  image: "",
  publishTime: "",
});
if (articleContentId !== 0) {
  axios.get("/articles/" + articleContentId).then(res => {
    if (res.data.code === 200) {
      console.log(res.data.data);
      Article.value = res.data.data
    }
  }).catch(err => {
    console.log(err);
  });
}
function back(){
  window.location.href = "http://localhost:8081/home/articles"
}
</script>

<template>

  <div class="parent-component">
    <div>
      <button
          style="position: relative;top: 20px;height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;margin-left:20px;float: none"
          @click="back()">返回
      </button>
    </div>
    <div style="text-align: center;width: 100%;margin-top: 30px" class="title">
      <h1>{{ Article.articleTitle }}</h1>
    </div>
    <div class="content">
      <div v-html="Article.content"></div>
    </div>
  </div>
</template>

<style scoped>
.content {
  width: 430px;
  margin: 20px auto 0;
}

.parent-component {
  overflow-y: auto; /* 当内容超出高度时，自动出现垂直滚动条 */
  height: 950px; /* 设置父组件的高度，可根据实际情况调整 */
  width: 100%; /* 设置父组件的宽度，可根据实际情况调整 */
}
</style>